<?php
$posts = $args['posts'] ?? [];
$pagesize = $args['pagesize'] ?? 6;
if (empty($posts)) {
    $posts = get_random_posts($pagesize);
}
?>
<div class="ctimgpost2">
    <section class="imgpost2">
        <?php
        foreach ($posts as $post) {
        ?>
            <a href="<?= $post['link'] ?>" title="<?= $post['title'] ?>">
                <img src="<?= $post['thumbnail'] ?>" alt="<?= $post['title'] ?>">
                <section>
                    <h3 class="nowrap2"><?= $post['title'] ?></h3>
                </section>
            </a>
        <?php
        }
        ?>
    </section>
</div>
<style>
    :root {
        --border-radius: 0;
        --color-primary: #343b2e;
        --color-a-hover:white;
    }


    div.ctimgpost2 {
        container-type: inline-size;
        container-name: imgpost2;
    }

    section.imgpost2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 15rem 15rem;
        gap: var(--gap);
    }

    section.imgpost2>a {
        transition: var(--transition);
        background-color: var(--color-primary);
        position: relative;
        height: 15rem;
        overflow: hidden;
    }

    section.imgpost2>a>section {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--gap);
        background: linear-gradient(0deg, rgba(52, 59, 46, 0.98) 0%, rgba(56, 53, 53, 0.05) 47%, rgba(64, 57, 46, .45) 71%);
    }

    section.imgpost2>a>img {
        width: 100%;
        height: 100%;
        transition: var(--transition);
    }
    
    section.imgpost2>a>img,
    section.imgpost2>a>section>h3,
    section.imgpost2>a>section>span,
    section.imgpost2>a>section>p {
        cursor: pointer;
    }


    section.imgpost2>a:hover>img {
        transform: scale(1.15);
        filter: brightness(1.2);
        box-shadow: 0px 4px 6px rgb(255, 189, 65, .2);
    }

    @container imgpost2 (max-width: 1200px) {
        section.imgpost2 {
            grid-template-columns: repeat(3, 1fr);
        }

        section.imgpost2>a>img {
            height: 15rem;
        }

    }

    @container imgpost2 (max-width: 1024px) {
        section.imgpost2 {
            grid-template-columns: repeat(3, 1fr);
        }

        section.imgpost2>a>img {
            height: 12rem;
        }

        section.imgpost2>a:nth-child(3)>img {
            height: 12rem;
        }

        section.imgpost2>a:nth-child(3) {
            grid-column: auto;
            grid-row: auto;

        }
    }

    @container imgpost2 (max-width: 768px) {
        section.imgpost2 {
            grid-template-columns: repeat(2, 1fr);
        }
    }


    @container imgpost2 (max-width: 576px) {
        section.imgpost2 {
            grid-template-columns: auto;
        }

        section.imgpost2>a>img {
            height: 16rem;
        }
    }
</style>